﻿@model ShopBarModel

@{
    string accountUrl = Model.IsAuthenticated ? Url.Action("Info", "Customer") : Url.RouteUrl("Login", new { returnUrl = Context.Request.Query["returnUrl"].ToString() });
    var labelStyle = Display.GetThemeVariable<string>("shopbar-label", "warning");
    var isRtl = this.WorkContext.WorkingLanguage.Rtl;
}

<div class="shopbar-col shopbar-tools" data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { cart = Model.ShoppingCartEnabled, wishlist = Model.WishlistEnabled, compare = Model.CompareProductsEnabled })">

    @*Hamburger Menu*@
    <div class="shopbar-tool d-lg-none" id="shopbar-menu">
        <a class="shopbar-button" href="#" data-toggle="offcanvas" data-autohide="true" data-placement="@(isRtl ? "right" : "left")" data-fullscreen="false" data-disablescrolling="true" data-target="#offcanvas-menu">
            <span class="shopbar-button-icon">
                <i class="icm icm-menu"></i>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Common.Menu")
            </span>
        </a>
    </div>

    <zone name="shopbar_tools_before"></zone>

    @*User*@
    <div class="shopbar-tool d-lg-none" id="shopbar-user">
        <a class="shopbar-button" href="@accountUrl">
            <span class="shopbar-button-icon">
                <i class="icm icm-user"></i>
            </span>
            <span class="shopbar-button-label-sm">
                @T(Model.IsAuthenticated ? "Account.MyAccount" : "Account.Login")
            </span>
        </a>
    </div>

    <div sm-if="Model.CompareProductsEnabled" class="shopbar-tool" id="shopbar-compare" data-target="#compare-tab">
        <a asp-action="CompareProducts" asp-controller="Catalog" asp-area="" class="shopbar-button navbar-toggler"
           data-toggle="offcanvas" data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { compare = true })"
           data-autohide="true" data-placement="@(isRtl ? "left" : "right")" data-fullscreen="false" data-disablescrolling="true" data-target="#offcanvas-cart">
            <span class="shopbar-button-icon">
                <i class="icm icm-repeat"></i>
                <span class='badge badge-pill label-cart-amount badge-@labelStyle' attr-style='(Model.CompareItemsCount == 0, "display: none")' data-bind-to="CompareItemsCount">
                    @Model.CompareItemsCount
                </span>
            </span>
            <span class="shopbar-button-label">
                <span>@T("Common.Shopbar.CompareProductsPartOne")</span><br />
                <strong>@T("Common.Shopbar.CompareProductsPartTwo")</strong>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Common.Shopbar.Compare")
            </span>
        </a>
    </div>

    <div sm-if="Model.WishlistEnabled" class="shopbar-tool" id="shopbar-wishlist" data-target="#wishlist-tab">
        <a asp-route="Wishlist" class="shopbar-button navbar-toggler" data-toggle="offcanvas" data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { wishlist = true })"
           data-autohide="true" data-placement="@(isRtl ? "left" : "right")" data-fullscreen="false" data-disablescrolling="true" data-target="#offcanvas-cart">
            <span class="shopbar-button-icon">
                <i class="icm icm-heart"></i>
                <span class='badge badge-pill label-cart-amount badge-@labelStyle' attr-style='(Model.WishlistItemsCount == 0, "display: none")' data-bind-to="WishlistItemsCount">
                    @Model.WishlistItemsCount
                </span>
            </span>
            <span class="shopbar-button-label">
                <span>@T("Common.Shopbar.WishlistPartOne")</span><br />
                <strong>@T("Common.Shopbar.WishlistPartTwo")</strong>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Wishlist")
            </span>
        </a>
    </div>

    <div sm-if="Model.ShoppingCartEnabled" class="shopbar-tool" id="shopbar-cart" data-target="#cart-tab">
        <a asp-route="ShoppingCart" class="shopbar-button navbar-toggler" data-toggle="offcanvas" data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { cart = true })"
           data-autohide="true" data-placement="@(isRtl ? "left" : "right")" data-fullscreen="false" data-disablescrolling="true" data-target="#offcanvas-cart">
            <span class="shopbar-button-icon">
                <i class="icm icm-bag"></i>
                <span class='badge badge-pill label-cart-amount badge-@(labelStyle)' attr-style='(Model.CartItemsCount == 0, "display: none")' data-bind-to="CartItemsCount">
                    @Model.CartItemsCount
                </span>
            </span>
            <span class="shopbar-button-label">
                <span>@T("Common.Shopbar.BasketPartOne")</span><br />
                <strong>@T("Common.Shopbar.BasketPartTwo")</strong>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Common.Shopbar.Basket")
            </span>
        </a>
    </div>

    <zone name="shopbar_tools_after"></zone>
</div>

<widget target-zone="end" key="offcanvas-menu">
    <aside id="offcanvas-menu" class="offcanvas offcanvas-overlay offcanvas-@(isRtl ? "right" : "left") offcanvas-shadow" data-blocker="true" data-overlay="true">
        <div class="offcanvas-content">
            <div id="offcanvas-menu-container" data-url="@(Url.Action("OffCanvas", "Menu"))">
                @*Ajax content will be rendered here*@ 
            </div>
        </div>
    </aside>
</widget>

<widget target-zone="end" key="offcanvas-cart">
    <aside id="offcanvas-cart" class="offcanvas offcanvas-lg offcanvas-overlay offcanvas-@(isRtl ? "left" : "right") offcanvas-shadow" data-lg="true" data-blocker="true" data-overlay="true">
        <div class="offcanvas-content">
            @await Component.InvokeAsync("OffCanvasCart")
        </div>
    </aside>
    @*TODO: (mh) (core) This is problematic!!! Scripts are there before widget was rendered thus they won't become initialized correctly*@
    <script src="~/js/public.offcanvas-cart.js"></script>
</widget>